<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"
           uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Bootstrap Core CSS -->
    <link href="/lib/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
    <!-- Custom CSS -->
    <link href="/lib/css/style.css" rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="/lib/css/morris.css" type="text/css"/>
    <!-- Graph CSS -->
    <link href="/lib/css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="/lib/js/jquery-2.1.4.min.js"></script>
    <!-- //jQuery -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <!-- lined-icons -->
    <link rel="stylesheet" href="/lib/css/icon-font.min.css" type='text/css' />
    <!-- //lined-icons -->
    <link rel="stylesheet" type="text/css" href="/lib/css/table-style.css" />
    <link rel="stylesheet" type="text/css" href="/lib/css/basictable.css" />
    <script type="text/javascript" src="/lib/js/jquery.basictable.min.js"></script>
</head>
<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="mother-grid-inner">

            <!-- 导入adminheader -->
            <jsp:include page="adminheader.jsp"></jsp:include>

            <!-- start of agile-grids -->
            <div class="agile-grids">
                <!-- tables -->
                <div class="agile-tables">

                    <div class="bs-component mb20">
                        <!--search-box-->
                        <div class="w3layouts-left">
                            <!--search-box-->
                            <div class="w3-search-box">
                                <form action="#" method="post">
                                    <input type="text" placeholder="查找..." required="">
                                    <input type="submit" value="">
                                </form>
                            </div><!--//end-search-box-->
                            <div class="clearfix"> </div>
                        </div>
                        <a href="#">
                            <button type="button" class="btn btn-lg btn-primary btn-block" data-toggle="modal" data-target="#addUserModal">新增</button>
                        </a>
                    </div>
                    <br/>
                    <div class="w3l-table-info">
                        <h2>角色列表</h2>
                        <table id="table">
                            <thead>
                            <tr>
                                <th>角色名</th>
                                <th>创建时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${requestScope.rolelist }" var="role">
                                <tr>
                                    <td>${role.roleName}</td>
                                    <td>${role.createTime}</td>
                                    <td>
                                            <%--<a href="#">--%>
                                            <%--<button class="btn btn-primary" data-toggle="modal" data-target="#updateUserModal">--%>
                                            <%--修改--%>
                                            <%--</button>--%>
                                            <%--</a>--%>
                                            <%--<a href="#" id="deleteuser">--%>
                                            <%--<button type="button" class="btn btn-lg btn-primary btn-block">删除</button>--%>
                                            <%--</a>--%>
                                        <a href="/api/adminUsers/deleteStudentByPrimaryKey?studentId=${user.id}">
                                            <button class="btn btn-primary" id="deleteuser" onclick="deleteUser()">删除</button>
                                        </a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- end of agile-grids -->


            <!-- 模态框（Modal） -->
            <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabelAdd">
                                新增学生用户
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" id="addUserForm">
                                <div class="form-group">
                                    <label for="studentId" class="col-sm-2 control-label hor-form">学号</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="studentId" class="form-control" id="studentId" placeholder="学号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="idCardName" class="col-sm-2 control-label hor-form">姓名</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="idCardName" class="form-control" id="idCardName" placeholder="姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="userPassword" class="col-sm-2 control-label hor-form">密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" name="userPassword" class="form-control" id="userPassword" placeholder="密码">
                                    </div>
                                </div>
                                <%--<div class="form-group">--%>
                                <%--<label for="roleType" class="col-sm-2 control-label">用户角色</label>--%>
                                <%--<div class="col-sm-8">--%>
                                <%--<select name="roleType" class="form-control1">--%>
                                <%--<option value="学生用户">学生用户</option>--%>
                                <%--</select>--%>
                                <%--</div>--%>
                                <%--</div>--%>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                取消
                            </button>
                            <button type="button" class="btn btn-primary" id="adduser-button">
                                新增
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <!-- 模态框结束 -->

            <!-- 新增用户 -->
            <script>
                $(function(){
                    $("#adduser-button").click(
                        function() {
                            $.ajax({
                                url: '/api/adminUsers/addStudentUser',
                                type: 'post',
                                dataType: 'json',
                                data:$('#addUserForm').serialize(),
                                success: function (data) {
                                    if (data.status == 0) {
                                        alert("新增成功");
                                        location.reload();
                                    } else {
                                        alert("新增失败");
                                        location.reload()
                                    }
                                },
                                error : function(data) {
                                    alert(data.msg);
                                    location.reload()
                                },
                            });
                        }
                    );
                });

            </script>



            <script>
                function deleteUser() {
                    location.reload();
                }
            </script>



            <!-- script-for sticky-nav -->
            <script>
                $(document).ready(function() {
                    var navoffeset=$(".header-main").offset().top;
                    $(window).scroll(function(){
                        var scrollpos=$(window).scrollTop();
                        if(scrollpos >=navoffeset){
                            $(".header-main").addClass("fixed");
                        }else{
                            $(".header-main").removeClass("fixed");
                        }
                    });

                });
            </script>
            <!-- /script-for sticky-nav -->
            <!--inner block start here-->
            <div class="inner-block">

            </div>
            <!--inner block end here-->
            <!--copy rights start here-->
            <%--<div class="copyrights">--%>
            <%--<p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>--%>
            <%--</div>--%>
            <!--COPY rights end here-->
        </div>
    </div>
    <!--//content-inner-->

    <!-- 引入导航栏 -->

    <jsp:include page="admin_usermanager_nav.jsp"></jsp:include>

    <script>
        var toggle = true;

        $(".sidebar-icon").click(function() {
            if (toggle)
            {
                $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
                $("#menu span").css({"position":"absolute"});
            }
            else
            {
                $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
                setTimeout(function() {
                    $("#menu span").css({"position":"relative"});
                }, 400);
            }

            toggle = !toggle;
        });
    </script>
    <!--js -->
    <script src="/lib/js/jquery.nicescroll.js"></script>
    <script src="/lib/js/scripts.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="/lib/js/bootstrap.min.js"></script>
    <!-- /Bootstrap Core JavaScript -->
    <!-- morris JavaScript -->
    <script src="/lib/js/raphael-min.js"></script>
    <script src="/lib/js/morris.js"></script>
    <script>
        $(document).ready(function() {
            //BOX BUTTON SHOW AND CLOSE
            jQuery('.small-graph-box').hover(function() {
                jQuery(this).find('.box-button').fadeIn('fast');
            }, function() {
                jQuery(this).find('.box-button').fadeOut('fast');
            });
            jQuery('.small-graph-box .box-close').click(function() {
                jQuery(this).closest('.small-graph-box').fadeOut(200);
                return false;
            });

            //CHARTS
            function gd(year, day, month) {
                return new Date(year, month - 1, day).getTime();
            }

            graphArea2 = Morris.Area({
                element: 'hero-area',
                padding: 10,
                behaveLikeLine: true,
                gridEnabled: false,
                gridLineColor: '#dddddd',
                axes: true,
                resize: true,
                smooth:true,
                pointSize: 0,
                lineWidth: 0,
                fillOpacity:0.85,
                data: [
                    {period: '2014 Q1', iphone: 2668, ipad: null, itouch: 2649},
                    {period: '2014 Q2', iphone: 15780, ipad: 13799, itouch: 12051},
                    {period: '2014 Q3', iphone: 12920, ipad: 10975, itouch: 9910},
                    {period: '2014 Q4', iphone: 8770, ipad: 6600, itouch: 6695},
                    {period: '2015 Q1', iphone: 10820, ipad: 10924, itouch: 12300},
                    {period: '2015 Q2', iphone: 9680, ipad: 9010, itouch: 7891},
                    {period: '2015 Q3', iphone: 4830, ipad: 3805, itouch: 1598},
                    {period: '2015 Q4', iphone: 15083, ipad: 8977, itouch: 5185},
                    {period: '2016 Q1', iphone: 10697, ipad: 4470, itouch: 2038},
                    {period: '2016 Q2', iphone: 8442, ipad: 5723, itouch: 1801}
                ],
                lineColors:['#ff4a43','#a2d200','#22beef'],
                xkey: 'period',
                redraw: true,
                ykeys: ['iphone', 'ipad', 'itouch'],
                labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
            });


        });
    </script>
</body>
</html>